<template>
  <div>
    <!-- 栅格布局 -->
    <el-row justify="space-between">
      <!-- 搜索 -->
      <el-col :span="14">
        <el-input v-model="categories.searchCategoriesQuery.cat_id" placeholder="请输入ID进行搜索" clearable
          @keyup.enter="searchClick" @clear="searchClear" class="input">
          <template #prepend>ID</template>
          <template #append>
            <el-button icon="Search" @click="searchClick" class="searchBtn" />
          </template>
        </el-input>
      </el-col>
      <!-- 添加按钮 -->
      <el-col :span="4">
        <el-button type="primary" @click="addCategories">添加分类</el-button>
      </el-col>
    </el-row>
    <!-- 添加分类dialog框 -->
    <el-dialog title="添加一级分类" v-model="categories.addDialog" width="50%">
      <!-- 表单 -->
      <el-form ref="addFormRef" :model="categories.addCategoriesQuery" :rules="addRules" label-position="top"
        status-icon>
        <!-- <el-form-item label="分类层级" prop="cat_level">
          <el-input v-model="categories.addCategoriesQuery.cat_level" placeholder="请选择分类层级"></el-input>
          <el-select v-model="categories.addCategoriesQuery.cat_level" placeholder="Select" style="width:100%"
            @change="handleSelect">
            <el-option label="一级分类" value="0" />
            <el-option label="二级分类" value="1" />
            <el-option label="三级分类" value="2" />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="父级分类" prop="cat_pid" v-show="categories.addCategoriesQuery.cat_level != '0'">
          <el-input v-model="categories.addCategoriesQuery.cat_pid" placeholder="请选择父分类pid"></el-input>
          <el-cascader v-model="categories.addCategoriesQuery.cat_pid" :options="categories.categoriesListALL"
            :props="{ checkStrictly: false, value: 'cat_pid', label: 'cat_name', children: 'children' }" clearable
            style="width:100%">
            <template #default="{ node, data }">
              <span>{{ data.cat_name }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
        </el-form-item> -->
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="categories.addCategoriesQuery.cat_name" placeholder="请输入新增分类名称"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <template #footer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="categories.addDialog = false">取 消</el-button>
          <el-button type="primary" @click="addClick">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import useStore from '@/pinia/index.js';
const { categories } = useStore();
// 表单验证对象
const addFormRef = ref(null);
// 表单验证规则
const addRules = reactive({
  cat_name: [
    { required: true, message: "请输入分类名称", trigger: "blur" },
    { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
  ]
});
// 搜索点击事件
const searchClick = () => {
  // 获取搜索的值
  categories.REQUEST_searchCategories();
};
// 清空搜索点击事件
const searchClear = () => {
  // 重新获取列表数据
  categories.REQUEST_categoriesList();
};
// 添加分类点击事件
const addCategories = () => {
  categories.addDialog = true;// 显示添加分类dialog框
};
// 添加分类确认事件
const addClick = () => {
  // 校验表单
  addFormRef.value.validate(valid => {
    if (valid) {
      categories.REQUEST_addCategories();
    } else {
      return false;
    }
  });
};
// 分类层级选择事件
const handleSelect = () => {
  categories.REQUEST_categoriesListAll();// 获取所有categories.addCategoriesQuery.cat_level级分类列表数据
}

</script>

<style lang="less" scoped>
.input {
  width: 100%;
}

.searchBtn {
  &:hover {
    color: black !important;
  }
}
</style>